<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GeoTrellis</title>
    <meta name="description" content="GeoTrellis features demo.">
    <meta name="author" content="Azavea">

	 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      .options {
		  float: right;
		  z-index: 999;
		  margin-top: 22px;
      }

      #opacitySlider {
        float:right;
        width:200px;
        padding-left: 20px;
		  margin-top: -3px;
      }

      #colorChooser {
        float:left;
      }
    </style>
    <link href="css/leaflet.css" rel="stylesheet"/>
    <link href="css/leaflet.draw.css" rel="stylesheet"/>
    <!--[if lte IE 8]>
	   <link rel="stylesheet" href="../dist/leaflet.ie.css" />
	 <![endif]-->
    
    <link href="css/jquery-ui.css" rel="stylesheet"/>
    <link href="css/application.css" rel="stylesheet"/>
    
    <script src="js/leaflet-src.js"></script>
    <script src="js/leaflet.draw.js"></script>
    <script src="js/geojson.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery-ui-1.10.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!--[if lt IE 9]>
        <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

  </head>

  <body>

  <div id="main">
  
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-main">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Chattanooga Agriculture & Forestry Value Model</a>
          <div class="nav-collapse collapse">
            <ul class="nav pull-right">
              <li><a href="#aboutModal" data-toggle="modal">About</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-main">
      <div class="row">

			<div id="leftCol">

				<div id="map">
					<a class="btn btn-inverse" id="clearButton" href="#">Clear Polygon</a>
				</div>
	  
			<div id="wrap">
				<div class="well pull-left">
					<table>
						<tbody class="legend">
							<tr>
								<td><img id="activeRamp" style="text-align: middle;"></img></td>
							</tr>
							<tr>
								<td>
									<small>Low</small>
                        		</td>
								<td style="position: absolute; margin-left: -28px;">
									<small>High</small>
                        		</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="options">
					<ul id="colorChooser" class="nav">
						<li class="dropdown">
							<a class="btn dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">
								Color Ramps <i class="icon-chevron-up"></i>
							</a>
							<ul id="color-ramp-menu" class="dropdown-menu" role="menu" aria-labelledby="drop5"></ul>
						</li>
					</ul> <!-- /tabs -->
					<div id="opacitySlider">
						<span class="slider-label">Opacity</span>
						<div id="opacity-slider"></div>
					</div>
			   </div>
		   </div> <!-- end wrap -->
	  
        </div><!--/map-->

        <div id="sidebar">
		
		<ul class="nav nav-tabs">
			<li class="active"><a href="#parameters" data-toggle="tab">Parameters</a></li>
			<li><a href="#summary" data-toggle="tab">Summary</a></li>
		</ul>
		
		
		<div class="tab-content" id="tabBody">
		
			<div class="tab-pane active" id="parameters">
			<!-- Parameter 1 -->
			  <div class="well">
				<h4 class="slider-label">Parameter 1</h4>
				<span class="weight">
				</span>
				<div class="slider"></div>	
			  </div>
			  
			<!-- Parameter 2 -->
			  <div class="well">
				<h4 class="slider-label">Parameter 2</h4>
				<span class="weight">
				</span>
				<div class="slider"></div>	
			  </div>
			  
			<!-- Parameter 3 -->
			  <div class="well">
				<h4 class="slider-label">Parameter 3</h4>
				<span class="weight">
				</span>
				<div class="slider"></div>	
			  </div>
			  
			<!-- Parameter 4 -->
			  <div class="well">
				<h4 class="slider-label">Parameter 4</h4>
				<span class="weight">
				</span>
				<div class="slider"></div>	
			  </div>
			  
			<!-- Parameter 5 -->
			  <div class="well">
				<h4 class="slider-label">Parameter 5</h4>
				<span class="weight">
				</span>
				<div class="slider"></div>	
			  </div>		  
		  </div>
		  
		  <div class="tab-pane" id="summary">
			<h3>Summary</h3>
            <table id="summary-data" class="table table-striped summary-table">
				<tbody>
					<tr></tr>
				</tbody>
			</table>
			<p>About the model score: For each parameter, the number of cells representing presence within the study area are summed and then multiplied by the weight applied before running the model. This value is then divided by the total number of cells in the study area. All individual parameter scores are then summed to produce the total study area score. The score does not represent a standard metric, but is valuable when comparing between model results for different study areas or weighting schemes.</p>
		  </div>
		  
		  </div> <!--/tab-content -->
		  
        </div><!--/span-->
		  
      </div><!--/row-->

    </div><!--/.fluid-container-->
	
	</div>
    
    <!-- Modal -->
    <div id="aboutModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <h3 id="myModalLabel">Chattanooga Agricultural & Forestry Model</h3>
      </div>
      <div class="modal-body">
        <p>This project is a joint effort of the University of Tennessee at Chattanooga and Azavea, with funding from the Lyndhurst Foundation.</p>
		  <p>The Center for Academic and Innovative Technologies at the University of Tennessee at Chattanooga (CAIT) (UTC), was funded to develop a geospatial data library and planning applications to support long term regional planning efforts. Original project was named the "Regional Resource Inventory". This decision support system and current demo application are being developed in collaboration with a long term regional planning effort for the Greater Chattanooga area (<a href="http://thrive2055.com/" target="_blank">http://thrive2055.com</a>).</p>
        <p>This is a demo application. In the coming months, we hope to build out the application to include additional models, contextual data layers, and reporting functionality.</p>
		  <p>UTC will continue to serve as a regional clearinghouse for geospatial data, modeled scenarios, and decision support tools after the 3 year regional planning effort is completed.</p>
		  <p>For more information on the UTC project contact:<br><br>
		  Andy Carroll<br>
		  GIS Manager<br>
		  Center for Academic and Innovative Technologies<br><br>
		  University of Tennessee at Chattanooga<br>
		  615 McCallie Avenue<br>
		  Chattanooga, TN 37403-2598 <br><br>
		  Office: (423) 425-5389<br>
		  Email: <a href="mailto:andrew-carroll@utc.edu">andrew-carroll@utc.edu</a>
		  </p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>


    <script src="js/application.js"></script>
	
    <!-- Templates -->

    <div id="parameterSlider" style="display:none">
      <div class="well">
        <h4 class="slider-label">Parameter 1</h4>
        <span class="weight">
        </span>
        <div class="slider"></div>
      </div>
    </div>

    <li id="colorRampTemplate" role="presentation" style="display:none">
      <a role="menuitem" tabindex="-1" href="#" onclick="return false;">
        <img role="menuitem" tabindex="-1" src="img/ramps/blue-to-orange.png"></img>
      </a>
    </li>

  </body>
</html>
